<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>证书demo</title>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <script src="../js/vue/vue.js"></script>
  <link rel="stylesheet" href="../js/elementui/index.css">
  <script src="../js/elementui/index.js"></script>
  <script src="../js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  <script src="/js/common.js?t=20250804"></script>
  <link rel="stylesheet" href="../css/common.css">

  <script src="js/globalOptions.js?t=20220214"></script>
  <script src="/js/theme/jspdf.min.js"></script>

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>

  <script src="/js/cert/cert_data.js"></script>
  <script src="/js/cert/pdf.js"></script>

  <style>
    #app {
      height: 100%;
      box-sizing: border-box;
    }

    .cert-demo {
      padding: 20px;
    }

    .demo-data .el-form-item {
      margin-bottom: 4px !important;
    }

    /*.el-form-item input {max-width: 500px;}*/
  </style>
</head>
<body>
<div id="app" class="cert-demo">

  <el-form label-width="130px">

    <el-row>
      <el-col :span="5">
        <el-form-item label="证书">
          <el-select v-model="form.certId" style="width:100%">
            <el-option v-for="item in certList"
                       :key="item.id"
                       :label="item.type+'-'+item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-col>
      <el-col :span="10">
        <el-form-item label-width="15px">
          <el-checkbox v-model="isMark" @change="reloadCertSetting">mark as red</el-checkbox>
        </el-form-item>

      </el-col>


    </el-row>

    </el-row>
    <div class="step-box" style="margin-bottom: 20px;"><span></span>
    </div>

    <el-row class="demo-data">
      <el-col :span="10">
        <el-row>
          <el-form-item v-for="(key,item) in dataList" :label="item" size="mini">
            <el-input v-model="form.demo[item]" :placeholder="key"></el-input>
          </el-form-item>

          <el-form-item label-width="10px" style="text-align: right;">

            <el-button @click="reload">reload</el-button>
            <el-button @click="saveDemo" type="primary" style="margin-right: 100px;">保存模拟数据</el-button>
            <el-button @click="test" type="success">生成证书</el-button>
          </el-form-item>
        </el-row>
        <div class="step-box">证书文本参数设置</div>
        <el-row>
          <el-form-item label-width="0px" size="mini" class="cert-text" style="min-height: 90px;"
                        v-for="(item,index) in cert.items" :key="item.id">
            <div style="position: relative;">
              <div>
                <el-col :span="12">
                  <el-input v-model="item.text" placeholder="text"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="item.font" clearable placeholder="font" style="width:100%;">
                    <el-option v-for="font in fontList" :key="font.name" :label="font.name"
                               :value="font.name"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="3">
                  <el-input v-model="item.fontSize" placeholder="size"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-input v-model="item.color" placeholder="color"></el-input>
                </el-col>
              </div>
              <div style="margin-top: 2px;">
                <el-col :span="3">
                  <el-input v-model="item.x" placeholder="x"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-input v-model="item.y" placeholder="y"></el-input>
                </el-col>

                <el-col :span="4">
                  <el-input v-model="item.options.charSpace" placeholder="char space"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="item.options.lineHeightFactor" placeholder="line height"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="item.options.maxWidth" placeholder="max width"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="item.options.align" clearable placeholder="align">
                    <el-option v-for="font in alignList" :key="font.code" :label="font.code"
                               :value="font.code"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="item.options.baseline" placeholder="baseline"></el-input>
                </el-col>
                <div style="clear: both"></div>
              </div>

            </div>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="14" style="box-sizing: border-box; padding: 0px 20px;">
        <iframe id="framePdf" type="application/pdf" width="100%" height="100%" frameborder="1"
                style="position:relative;z-index:999"></iframe>
      </el-col>

    </el-row>

  </el-form>

</div>
</body>
<script >
  new Vue({
    el: '#app',
    data: function () {
      return {
        "isMark":true,
        "form": {"certId": "", demo: {}},
        "fontList": [],
        alignList: [{"code": "left"}, {"code": "center"}, {"code": "right"}, {"code": "justify"}],
        "dataList": {
          "Award": "奖项",
          "Ranking2": "等级",
          "Ranking": "等级 Place",
          "TeamNumber": "团队编号",
          "TeamName": "团队编号",
          "TeamName": "团队名称",
          "Name": "授权对象",
          "StudentNumber": "学生编号",
          "Division": "区域",
          "HSV": "HSV",
          "TestName": "学科",
          "Score": "分数"
        },
        "cert": {},
        "certList": [],
        "demoList": [],
      }
    },
    watch: {
      "form.certId": function (val) {
        let find = this.demoList.find(item => item.certId == val);
        if (find) {
          this.form.id = find.id;
          this.form.demo = JSON.parse(find.demo);
          this.form.find = find;

        } else {
          delete this.form.id;
          delete this.form.find;
          // this.form.demo = {};
        }
        this.reloadCertSetting();

      }
    },
    created: function () {
      $$.list("cert_demo", list => {
        this.demoList = list;
        _CertData.loadFont(() => {
          $$.listBy("cert", "type,name,defaultCert desc ", (list) => {
            this.certList = list;
            let id = getUrlParam("id");
            if (id) {
              this.form.certId = id;
            }
          });
        })
        // _CertData.loadCertList("",(list)=>{
        //     // this.certList = list;
        //     // let id = getUrlParam("id");
        //     // if (id){
        //     //     this.form.certId = id;
        //     // }
        // })

      });
      $$.list("font", (list) => {
        this.fontList.push(...list);
      });
    },
    mounted: function () {

      $("#framePdf").height($("#app").height() - 100)
    },
    methods: {
      test() {
        let draw = (cert) => {
          cert.items.forEach(item => {
            if (/^\[(.*?)\]$/.test(item.text)) {
              try {
                item.texts = JSON.parse(item.text);
              } catch (e) {
              }
            } else {
              item.texts = item.text;
            }

          });
          let doc = _Pdf.getDoc(cert);
          if (cert.picData) {
            doc.addImage(cert.picData, 'png', 0, 0, cert.width, cert.height);
          }

          _Pdf.drawText(doc, cert.items, this.form.demo);
          let string = doc.output('bloburi');
          $('#framePdf').attr('src', string);
        }
        // _CertData.loadCert(this.form.certId, (cert) => {
        //   draw(cert);
        // });
        draw(this.cert);
      },
      saveDemo() {
        let data = {id: this.form.id, certId: this.form.certId, demo: JSON.stringify(this.form.demo)}
        $$.save("cert_demo", data, (r) => {
          layer.msg("保存成功!");
          if (!this.form.id) {
            this.form.id = r.id;
          }
          if (!this.form.find) {
            this.demoList.push(r);
            this.form.find = r;
          }
        })
      },
      reload() {
        if (this.form.find) {
          this.form.demo = JSON.parse(this.form.find.demo);
        } else {
          this.form.demo = {};
        }

      },
      reloadCertSetting(){

        _CertData.loadCert(this.form.certId, cert => {
          this.cert = JSON.parse(JSON.stringify(cert));
          if (this.isMark){
            this.cert.items.forEach(item => {
              item.color = "red";
            });
            this.cert.pic = this.cert.pic.replace("/img/cert/", "/img/demo/");
            $.get(this.cert.pic, (r) => {
              this.cert.picData = r;
            });
          }

        })
      }
    }
  })
</script>
</html>